<template>
  <!-- <div :class="className" :style="{height:height,width:width}" /> -->
  <div style="height: 440px;">
    <div class="fontWeight biaoti">人员统计</div>
    <div class="flex flex-end mt20 mb55">
      <el-select style="width:150px" v-model="companyAdminId" class="mr10" placeholder="请选择客户企业" clearable filterable>
        <el-option
          v-for="dict in clientEnterpriseOptions"
          :key="dict.id"
          :label="dict.companyName"
          :value="dict.id"
        />
      </el-select>
      <el-date-picker
      style="width:135px"
      v-model="value1"
      type="date"
      placeholder="开始日期"
      :picker-options="pickerOptions"
      >
      </el-date-picker>
      <span style="padding:7px 5px">-</span>
      <el-date-picker
      style="width:135px"
      v-model="value2"
      type="date"
      placeholder="结束日期"
      :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>
    <div style="height:300px;width:100%" id="myChart_bar">
    
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '300px'
  //   }
  // },
  data() {
    return {
      chart: null,
      pickerOptions: {
            disabledDate(time) {
                let curDate = (new Date()).getTime();
                let twelve = 365 * 24 * 3600 * 1000;
                let twelveMonths = curDate - twelve;
                return time.getTime() > Date.now() || time.getTime() < twelveMonths;
            }
      },
      value1: '',
      value2: '',
      clientEnterpriseOptions: [], // 所有客户企业下拉列表信息数据字典数据
      companyAdminId: undefined,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.getClientEnterprise().then(response => {
      this.clientEnterpriseOptions = response.data;
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('myChart_bar'), 'macarons')
      this.chart.setOption({
        title: {
          text: '单位：万',
          textStyle: {
              color: '#999',
              fontSize: '12px'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'none' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
              show: true,
              textStyle: {
                  color: '#333'
              }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
              show: true,
              textStyle: {
                  color: '#333'
              }
          },
          splitLine: {
              show: true,
              lineStyle:{
                color: '#f0f0f0',
                width: 1,
                type: 'solid'
            }
      　　},
          splitArea: {
              show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        }],
        series: [{
          name: '人数',
          type: 'bar',
          barWidth: '10%',
          itemStyle: {
            color: '#045aff'
          },
          data: [0.2, 0.5, 1.1, 1.5, 2.5, 3, 4],
          animationDuration
        }]
      })
    }
  }
}
</script>
